<template>
  <el-form 
    :model="value" 
    :label-position="position" 
    :label-width="labelWidth" 
    :rules="config.rules" 
    :inline="true"
    :size="size" 
    ref="searchForm"
  >
    <el-row>
      <el-form-item 
        v-for="(item, index) in config.itemConfig" 
        :key="index"
        :label="item.label" 
        :prop="item.prop" 
        :label-width="item.labelWidth ? item.labelWidth : labelWidth"
      >
        <el-input 
          v-if="item.type === 'input'" 
          v-model.trim="value[item.prop]" 
          :disabled="item.disabled"
          :clearable="item.clearable ?? true" 
          :placeholder="item.placeholder" 
          :size="size" 
          style="width:200px;"
        />
        
        <el-select 
          v-else-if="item.type === 'select'" 
          v-model="value[item.prop]"
          :clearable="item.clearable ?? true"
          :multiple="!!item.multiple"
          :allow-create="!!item.allowCreate"
          :filterable="!!item.filterable"
          :disabled="item.disabled"
          :placeholder="item.placeholder" 
          :return-object="item.object"
          style="width:200px;"
        >
          <el-option 
            v-for="(optItem, inde) in item.optList" 
            :key="inde"
            :label="
              optItem.label || 
              optItem.goodsTypeName || 
              optItem.supplierName || 
              optItem.warehouseName || 
              `${optItem.goodsName}:${optItem.specName}:${optItem.specValue}`
            "
            :value="optItem.value || optItem.goodsSpecId || optItem.id"
          />
        </el-select>
        
        <el-date-picker 
          v-else-if="item.type === 'date'" 
          v-model="value[item.prop]"
          :value-format="item.dateFormate"
          :type="item.type"
          :disabled="item.disabled"
          :clearable="item.clearable ?? true"
          :placeholder="item.placeholder"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :picker-options="item.pickerOptions"
        />
        
        <el-date-picker 
          v-else-if="item.type === 'datetimerange'" 
          v-model="value[item.prop]"
          :value-format="item.dateFormate"
          :type="item.type"
          :disabled="item.disabled"
          :clearable="item.clearable ?? true"
          :placeholder="item.placeholder"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :picker-options="item.pickerOptions"
        />
        
        <div v-else />
      </el-form-item>
    </el-row>
    
    <el-row>
      <el-col :span="24">
        <el-form-item>
          <div class="searchBtn">
            <el-button 
              v-for="(item, index) in config.operate" 
              :key="index"
              :size="size"
              :type="item.type"
              :icon="item.icon"
              :disabled="item.disabled"
              @click="handleClick(item.handleClick, item.rule)"
            >
              {{ item.name }}
            </el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import Cookies from 'js-cookie';

interface ConfigItem {
  label?: string
  prop?: string
  type?: string
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  multiple?: boolean
  allowCreate?: boolean
  filterable?: boolean
  object?: boolean
  optList?: any[]
  dateFormate?: string
  startPlaceholder?: string
  endPlaceholder?: string
  pickerOptions?: any,
  labelWidth?: string
}

interface OperateItem {
  name?: string
  type?: string
  icon?: string
  disabled?: boolean
  handleClick: () => void
  rule?: boolean
}

interface Config {
  itemConfig: ConfigItem[]
  operate: OperateItem[]
  rules?: any
}

interface Props {
  value: Record<string, any>
  config: Config
  size?: string
  labelWidth?: string
  position?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: Cookies.get('size') || 'default',
  labelWidth: '80px',
  position: 'right'
})

const searchForm = ref<FormInstance>()

const handleClick = (func: () => void, bool?: boolean) => {
  if (bool && searchForm.value) {
    searchForm.value.validate((valid) => {
      if (valid) {
        func()
      } else {
        return false
      }
    })
  } else {
    searchForm.value?.clearValidate()
    func()
  }
}
</script>

<style scoped lang="scss">
.searchBtn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 769px) {
  .searchBtn {
    flex-wrap: wrap;

    .el-button {
      margin-bottom: 20px;
      margin-left: 0px;
      margin-right: 12px;
    }
  }
}
</style>
